<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport">
    <title>transition初使用</title>
  </head>
  <style>
    /* 
    transition过渡
      1.transition-property:过渡属性
      2.transition-duration:过渡时长
      3.transition-timing-function:过渡函数，默认liner(匀速)
      4.transition-delay:过渡延时
     */
    .box {
      width: 100px;
      height: 100px;
      background-color: pink;
      transition-property: width, transform;
      transition-duration: 2s;
      transition-timing-function: liner;
      transition-delay: 1s;
    }

    /*  .box:hover {
      width: 200px;
      transform: translate(600px, 0)
    } */
  </style>

  <body>
    <div class="box">div</div>
    <button class="btn">点击</button>

  </body>
  <script type="text/javascript">
    let btn = document.querySelector('.btn');
    let box = document.querySelector(".box");
    let x = 600;
    btn.onclick = function () {
      box.style.width = 200 + "px";
      /* 1.连接符写法 */
      // box.style.transform = "translate(" + 600 + "px)";
      /* 2. ES6 引入模板字符串：
            注意不是引号，而是反号
      */
      box.style.transform = `translate(${x}px)`;
      box.style.transform = `translate(${600}px)`;
    }
  </script>

</html>